<template>
    <div ref="chart" :style="{width:width , height:height}" class="chart_box"></div>
</template>

<script setup>
import * as echarts from 'echarts';
const { width , height , option} = defineProps({
    width:{
        type:String,
        default:"100%"
    },
    height:{
        type:String,
        default:"100%"
    },
    option:{
        type:Object,
    }
})
const chart = ref()

onMounted(()=>{
    var myChart = echarts.init(chart.value);
    if (option) {
        myChart.setOption(option);
    }
    window.addEventListener("resize", () => {
        myChart.resize();
    });
})
</script>

<style scoped>
.chart_box{
    border: 1px solid rgba(21, 63, 109, 0.80);
    background: linear-gradient(180deg, rgba(33, 88, 148, 0.10) 0%, #215894 100%);
}
</style>